<template>
    <div class="page6">
        <div class="contant fadeInDown">
            <p>今年，有<span class="yellowfont">108</span>人使用过通用云文档，文档总</p>
            <p>数达<span class="yellowfont">1008</span>个。</p>
            <p>部门协作、创作内容、记录灵感，</p>
            <p>每一份的积累，都是未来金光闪闪的宝藏。</p>
        </div>
        <div class="img1 animate__backInUp">
            <img src="../../assets/images/bill2022/w11/topIcon.png" alt="">
            <!-- <img src="../../assets/images/bill2022/6/img1.png"> -->
        </div>
    </div>
</template>

<script>

export default {
    components: {
    },
    // 定义属性
    data() {
        return {

        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {

    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
}
</script>

<style lang='less' scoped>
.contant {
    margin-top: 2rem;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 500;
    color: #fefefe;
    font-size: 2.1rem;
    line-height: 4rem;
    width: 90%;
    margin-left: 5%;
    text-align: left;

    .yellowfont {
        color: #fbd858;
        font-weight: 600;

    }

}

.img1 {
    width: 100%;
    position: absolute;
    bottom: 0;
  img{
    width: 100%;
  }
}
.swiper-slide-active .fadeInDown {
    animation: fadeInDown 1s ease-in-out;
    animation-iteration-count: 1;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }


    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0) ;
        transform: scale3d(0);
        -webkit-transform: scale3d(0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform: scale3d(1);
        -webkit-transform: scale3d(1);
    }
}

.swiper-slide-active .animate__backInUp {
    animation: backInUp 2s ease-in-out;
    animation-iteration-count: 1;
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(4000px) scale(.4);
    transform: translateY(4000px) scale(.4);
    opacity: .7
  }


  to {
    -webkit-transform:translateY(0) scale(1);
    transform:translateY(0) scale(1);
    opacity: 1
  }
}

</style>